@import "common";
body{
    min-width: 320px;
    max-width: 1080px;
    width: 15rem;
    margin: 0 auto;
    font-family: -apple-system,Helvetica,sans-serif;
    background-color: #F2F2F2;
}
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
.app{
  height: (80rem / 50);
  position: relative;
  width: 100%;
  top:0;
  font-size: (10rem / 50);
  background-color: rgb(51,51,51);
}
.app ul li{
  float: left;
  height: (80rem / 50);
  text-align: center;
  color: #fff;
  line-height: (80rem / 50);
  font-size:(16rem / 50) ;
  cursor: pointer;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.app ul li:first-child{
width: 1.2rem;
line-height: (80rem / 50);
text-align: center;

}
.app ul li:nth-child(2){
width:1.5rem ;

}
.app ul li:nth-child(2) img{
width:(30rem / 50) ;
 margin-top:(30rem / 50) ;
}
.app ul li:nth-child(3){
width: 8.55rem;
}
.app ul li:nth-child(4){
width: 3.75rem;
background-color: rgb(246,53,21);
}
.nav {
    width: 15rem;
    height: (88em / 50);
    background-color:rgb(200,37,25);
    margin: 0 auto;
    z-index: 999;
    position: sticky;
    top: 0;
    display: flex;
    .nav-left
    {
        margin: (35rem / 50) (15rem / 50) 0 (15rem / 50);
        width: (20rem / 50);
        height: (18rem / 50);
        display: inline-block;
        background: url() no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .nav-search{
        flex:1;
        display: block;
        position: relative;
     input{
        width: 100%;
        border: none;
        border-radius: (15rem / 50);
        height: (30rem / 50);
        overflow: hidden;
        background: #f7f7f7;
        font-size: 12px;
        -webkit-box-align: center;
        line-height: (30rem / 50);
        position: absolute;
        top: (30rem / 50);
        left: 0;
        padding-left: 35px;
        padding-right: 10px;
        box-sizing: border-box;
        outline: none;
      }

     .logo{  
      width: (20rem / 50);
      height: (15rem / 50);
      background: url() no-repeat;
      background-size: (20rem / 50) (15rem / 50);
      margin:(8rem / 50) (8rem / 50) 0 (15rem / 50);
      position: absolute;
      top: (30rem / 50);
      &::after{
        content: "";
        position: absolute;
        top:0;
        border-right: (1rem / 50) solid #ddd;
        left: (26rem / 50);
        height: (16rem / 50);
        }
     } 

     .icon-RectangleCopy {
        font-size: (22rem / 50);
        position: absolute;
        left: (54rem / 50);
        top: (30rem / 50);
        color:rgb(183,183,183);
        margin-right: (30rem / 50);
        
         }
      
         
    }  
    
    .nav-right{
        width: (54rem / 50);
        height: (44rem / 50);
        font-size: (14rem / 50);
        color: #fff;
        line-height: (88rem / 50);
        text-align: center;
        margin:0 (30rem / 50);
        cursor: pointer;
        }
}
    .banner{
      width: 15rem;
      height:(450rem / 50);
      overflow: hidden;
      position: relative;
      .silder-bg{
      background-image: -webkit-gradient(linear,left bottom,left top,from(#f1503b),color-stop(50%,#c82519));
      background-image: -webkit-linear-gradient(bottom,#f1503b,#c82519 50%);
      background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
      position: absolute;
      top: 0;
      left: -25%;
      height: 5.25rem;
      width: 150%;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
      }
      .swiper {
       width:calc(100% - 1.25rem);
        margin: 1rem auto;
        border-radius:.35rem; ;
        height:(350rem / 50);
        .swiper-slide{
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 100%;
            height: 100%;
          }
        }
          .swiper-pagination-bullet-active {
            background-color:red;
         }
  
    }}
   
      .advertise{
        height: (200rem/50);
        display: flex;
        a{ 
          flex:1;

        img{
          height: 100%;
          width: 100%;
        }
      }
      }
    
  .icon{
    width:15rem;
    height: 6rem;
    margin-top:.5rem ;
    a{
      float: left;
      height: 2.8rem;
      width: 3rem;
      text-align: center;
   
      img{
        display: block;
        width: (82rem / 50);
        height: (82rem / 50);
        margin:0  auto;
      }
      span{
        font-size:(25rem /50);
        color: #666;
      }
    }
  }

  .sec_kill_floor{
    box-shadow: 0 1px 1px #f2f2f2;
    background-color: #fff;
    height:5rem;
    border-radius: .6rem;
    overflow: hidden;
    margin: 0 auto;
    .tile_wrap{
      background: url() no-repeat;
      background-size: contain;
      height: 1.7rem;
      line-height: 1.7rem;
      vertical-align: middle;
      .sec_kill_floor_top{
        float: left;
        height: 1.35rem;
        margin-top: .4rem;
        margin-right: .25rem;
        margin-left: .5rem;
        font-family: PingFangSC-Semibold;
        font-size: .7rem;
        color: #333;
        letter-spacing: 0;
        line-height: 1.2;
      }
      .sec_kill_timer{
        height: .9rem;
        line-height: .9rem;
        float: left;
        margin-top: .4rem;
        vertical-align: middle;
      
      .sec_kill_timer_left{
     font-size: .65rem;
     color: #ff2727;
     padding-right: .25rem;
    padding-left: .25rem;
    float: left;
    margin-right: .2rem;
    position: relative;
    top: -1px;
    &::after{
      height: .875rem;
      width: 1.025rem;
      content: "";
      display: inline-block;
      vertical-align: middle;
      background-image: url(//wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
    }
  }
  .seckill-time{
    float: left;
    height: 100%;
    .seckill-time-box{
      height: 100%;
      color:#fff;
      border-radius:.2rem;
      font-size: .6rem;
      width:.75rem;
      background-color: red;
      float: left;
      text-align: center;
    }  
    span{
      width: .3rem;
      height: 100%;
      float: left;
      text-align: center;
      height: 100%;
      line-height: 1.4;
      font-size: .6rem;
      text-align: center;
      font-family: PingFangSC-Regular;
      color: #f2270c;
      font-weight: 700;
    }
   }
}
   .sec_kill_timer_right{
    float: right;
    height: 100%;
    .arrow_rt{
      height:.55rem;
      margin:.55rem .2rem ;
      border-radius:.6rem;
      width:.55rem;
      float:right;
      background:url('../image/arrow_rt_2ccb8cd5.png') no-repeat;
      background-size:cover; 
      cursor: pointer;     

    }
    span{
      color: #f2270c;
      font-size: .4rem;
      float: right;
    }
   }

  }
  .sec_kill_ad{
    height:6rem;
    width: 15rem;
    margin-top:0.3rem; 
  
    a{
      float: left;
      margin:.3rem .4rem ;
      justify-content: space-around;
      img{
        display:block;
        width:(85rem / 50) ;
        height:(90rem /50) ;
      }
      span{
        float: left;
        font-family: JDZhengHT-EN-Regular;
        color: #f2270c;
        font-size: .5rem;
      }
    }
  }
}
.box-footer{
width: 15rem;
display: flex;
margin-top:.5rem ;
justify-content: space-around;
.box-footer-left{
  width: 48%;
  .box-footer-left-content{
    height: 9rem;
    width:100% ;
    background-color: #fff;
    border-radius: .2rem;
    margin-bottom: .2rem;
    .box-image{
      height: 5rem;
      width: 100%;
      background-image: url("../image/9c7376078e1fe0db.jpg!q70.dpg.webp");
      background-size:cover ;
      background-position:50% ;
      border-radius:.2rem .2rem 0 0;
    }
    .box-goods-info{
      padding: 0 0.5rem 0.5rem;
      .box-goods-name{
        text-align: left;
        line-height:0.95rem;
        height: 1.8rem;
        font-size: 0.6rem;
        font-family: -apple-system, Helvetica, sans-serif;
        overflow: hidden;
        color: #434343;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-break: break-all;
        -webkit-box-orient: vertical;
      }
      .box-goods-price{
        font-style: normal;
        font-family: JDZH-Regular, sans-serif;
        display: inline-block;
        font-size: 0.6rem;
        line-height: 1rem;
        color: #ff4142;
      }
      .box-goods-row-bottom{
        height: 1rem;
        .box-goods-row-Goodcomments{
          float: left;
          color: #999;
          line-height: 1rem;
          font-size: .35rem;
          margin-right: 0.2rem; ;
        }
        .box-goods-row-right{
          float:right;
          line-height: .9rem;
          font-size:.4rem;
        }
      }
    }
  }
}

.box-footer-right{
  width:48%;
  .box-footer-right-content{
    height: 9rem;
    width:100% ;
    background-color: #fff;
    border-radius: .2rem;
    margin-bottom: .2rem;
    .box-image{
      height: 5rem;
      width: 100%;
      background-image: url("../image/9c7376078e1fe0db.jpg!q70.dpg.webp");
      background-size:cover ;
      background-position:50% ;
      border-radius:.2rem .2rem 0 0;
    }
    .box-goods-info{
      padding: 0 0.5rem 0.5rem;
      .box-goods-name{
        text-align: left;
        line-height:0.95rem;
        height: 1.8rem;
        font-size: 0.6rem;
        font-family: -apple-system, Helvetica, sans-serif;
        overflow: hidden;
        color: #434343;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-break: break-all;
        -webkit-box-orient: vertical;
      }
      .box-goods-price{
        font-style: normal;
        font-family: JDZH-Regular, sans-serif;
        display: inline-block;
        font-size: 0.6rem;
        line-height: 1rem;
        color: #ff4142;
      }
      .box-goods-row-bottom{
        height: 1rem;
        .box-goods-row-Goodcomments{
          float: left;
          color: #999;
          line-height: 1rem;
          font-size: .35rem;
          margin-right: 0.2rem; ;
        }
        .box-goods-row-right{
          float:right;
          line-height: .9rem;
          font-size:.4rem;
        }
      }
    }
  }
}
}